<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<html>
<head>
     <%@ include file="/common/meta.jsp" %>
<title></title>
</head>
<style>
body{
    font-size:12px;
    background: rgb(245, 245, 245);

}
div{
    color:rgba(14, 13, 13, 0.97)}
#m{
    padding-left:150px}
#middle{
    position:absolute;
    background:#CCC;
    height: 160px;
    width:530px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    border: 1px rgb(135, 142, 143) solid;
}
#left{
    float:left;
    background:#CCC;
    width: 149px;
    border: 1px rgb(135, 142, 143) solid;
}
#leftLable{
    padding-left: 29px;
    margin: 20px;
    height: 120
}
#right{
    float:right;
    background:rgb(243, 242, 242);
    width:117px;border: 1px rgb(135, 142, 143) solid;
    height: 160px;
}
#pagebox{
    width:800px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
}
#header{
    BACKGROUND: #CCC;
    HEIGHT: 41px;
}
#logo {
    float:left;
    MARGIN: 2px 2px ;
    padding:0px;
}
#footer{
   clear:both;
   background:#CCC;color:#fff;
   height:60px;
}
.content{
	 height:300px;
	 background: rgb(224, 229, 230);
}
.cho li { 
	 padding-top:24px;
     list-style-type:none;
     cursor: pointer;
	   }
.cho2 li{
    list-style-type:none;
}
.cho3 li:hover{
    background:rgba(88, 151, 139, 0.49);
    list-style-type:none; 
}
.cho4{
    width:530px;
    height:93px;
    background:rgb(224, 229, 230);
    margin-top: -12;
}
.button1 input[type="button" ], button {
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    width: 90;
    height: 30;
    margin-right: 65px;
    padding-right: 9;
    text-decoration: none;
    margin: 49;
    margin-top: 18;
}
.button2 input[type="button" ], button {
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    width: 90;
    height: 29;
    margin-right: 65px;
    padding-right: 9;
    text-decoration: none;
    margin: 190;
    margin-top: 5;
}
.span1 span{
    width:6px;
    margin-right: 22px;
    cursor: pointer;
}
.span2 span {width:6px;
    margin-right: 12px;
    cursor: pointer;
}
.span3 span{
    font-size:14px;
}
.hidden{
    display: none;
}
.show{
    display:"";
}
.Imt{
    font-size:14px;
    background-color:rgba(188, 213, 203, 0.38);
}
.demo {
    width: 800px;
    height: 220px;
    padding-top: -2px;
    margin: 0 auto;
}
		.jMax{
    width:530px;
    height:150px;
    float:left;

}
.jMax textarea{
    border:1px solid #ccc;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    background-color:rgba(255, 255, 255, 0.66);
    font-family:Arial;
    color:rgba(15, 15, 15, 0.72);
    width:800;
    height:266px;
    font-size:16px;
    padding:10px;
	resize:none;
	overflow:auto;
}
select {
    font-size: 100%;
    height: 24px;
    width: 90px;
    margin-top: 7px;
}
.jMax textarea:focus{
	outline:none;
	background-color:#F3FFCF;
}
.jMax-text{
    margin:5px 5px 5px 10px;
    color: rgba(44, 40, 40, 0.51);
    font-weight:bold;
    font-size:17px;
}
.jMax-submit{    
    margin:5px 5px 5px 10px;
    height:25px;
}
.jMax-submit input[type="submit"]{
    background: #222 url(http://zurb.com/images/alert-overlay.png) repeat-x;
    height:35px;
    float:left;
	width:100px;
    color: #596F14;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    border:none;
    cursor: pointer;
    background-color: #DFDFDF;
	font-size:16px;	
	border:1px solid #ccc;
}
#button23 input[type="button"]{
    cursor:default;
    width:50px;
    height: 25px;
	text-shadow: 0 -1px 1px #fff;
}
.jMax-submit input[type="submit"].disabled{
	cursor:default;
	color:#999;
	text-shadow: 0 -1px 1px #fff;
}
.jMax-submit input[type="submit"].enabled:hover{
    background-color: #ccc;
    color: #fff;
}
#hover1 span:hover{
    color: #FF0000; 
    background:rgba(88, 151, 139, 0.49);
	list-style-type:none;
}
#hover2 li{
	list-style-type:none;
}
.cho3 {
    background: rgba(255, 255, 255, 0.66);
    height: 122px;
    overflow-y: scroll;
    width:531px;
margin-right: 46px;
    cursor: pointer;
}
.mouse span{
    background: rgba(88, 151, 139, 0.49);
}
.dh li{ 
   background:#FFFFCC; 
   width:50px; 
   height:30px; 
   display:block; 
   text-align:center; 
   color:#000000;
   }
</style> 
<body>
<div id="pagebox">
<div class="Imt">
        信.息.发.布
</div>
<div id="header">
<div id="logo">
          <select id="province"> 
               <s:iterator value="list2"> 
            <option>${name}</option>
               </s:iterator>
          </select> 
                                 省
          <select id="city">
                <option>------</option>           
          </select> 
                               地区    信息类型
          <select id="type1">
              <option>车源</option>
              <option>货源</option>
          </select>
	</div>
</div> 
           <div class="content">
               <div class="demo">
                 <div id="demo1" class="jMax">
                    <div class="jMax-text" >
                       <span></span>
                    </div>
                       <textarea  id="addInfo"></textarea>
                  </div>
               </div>
            </div>
<div id="m">
    <div id="middle">
      <div id="show2" class="contentDisplay" style="display:none">
        <div class="cho3">
          <s:iterator value="list"> 
       <ul class="lispan" id="history${id}" cid="${id}" sid="${id}${city}${province}${infoType}${info}"> 
             <li class="lispan3">
               <span >
                ${id}
                ${city}
                ${province}
                ${infoType}
                ${info}
               </span>
             </li>
       </ul>
         </s:iterator>
</div>
   <div class="button2">
     <input type="button" name="cleanrecord"  onclick="delInfo();" value="删除这条记录">
   </div>
</div>
<div id="show1" class="contentDisplay">
   <div id="button23">
      <span id="select2">
                  省<select>
           <option>山东</option>
	       <option>广西</option>
         </select>
       <input type="button" value="添加"/>
       </span>
	  <span>
	      地区<select>
           <option>山东</option>
          </select>
       <input type="button" value="添加"/>
      </span>
	 <span>
	      县<select>
       <option>山东</option>
       </select>
      <input type="button" value="添加"/>
     </span>
	   </div>
	   <div id="hover1">
	   <div class="span1" id="span1">
	      <span>1</span>
	      <span>2</span>
	      <span>3</span>
	      <span>4</span>
	      <span>5</span>
	      <span>7</span>
	      <span>8</span>
	      <span>9</span>
	      <span>0</span>
	      <span>.</span>
	      <span>,</span>
	      <span>;</span>
	      <span>-</span>
	      <span>/</span>
	   <span class="backspace">退格</span>
	   </div>
	    <div class="span2" id="span2">
	      <span>货源:</span>
	      <span>车源:</span>
	      <span>有</span>
	      <span>货</span>
	      <span>车</span>
	      <span>急</span>
	      <span>需</span>
	      <span>求</span>
	      <span>要</span>
	      <span>发</span>
	      <span>到</span>
	      <span>回</span>
	      <span>去</span>
	      <span>吨</span>
	      <span>米</span>
	      <span>元</span>
	     </div>
	   </div>  
	   <div id="select1">
	     <select>
            <option>山东</option>
	        <option>gg</option>
         </select>
       <select>
           <option>常用词</option>
           <option>常用词2</option>
       </select>
       <select>
           <option>时间</option>
       </select>
       <select>
           <option>单位</option>
       </select>
       <select>
           <option>其他</option>
       </select>
       <select>
           <option>货类</option>
       </select>
       <select>
           <option>包装</option>
       </select>	 
	     <select>
           <option>货物</option>
       </select>
       <select>
           <option>蔬菜</option>
       </select>
       <select>
           <option>水果</option>
           <option>水果2</option>
       </select>
       <select>
           <option>其他货</option>
       </select >       
	   <select>
           <option>车长</option>
       </select>
       <select>
           <option>车型</option>
       </select>
       <select>
           <option>运费</option>
       </select>
       <select>
           <option>短语</option>
           <option>短语2</option>
       </select>
       </div>
	 </div>
</div>
</div>
<div id="left"> 
         <ul class="cho" id="leftLable">     
		    <li > 
		    <a href="">
		       <label>
		        <input type="radio" name="test" onclick="show();" value="自动生成" checked />	    
		                                           自动生成
		        </label>
		       </a>
		    </li>
		    <li >
		     <a href="">
		         <label> 
		          <input type="radio" name="test"  onclick="show();" value="历史记录" />
		                                          历史记录
		          </label>
		         </a>
		    </li>
		 </ul>
		 </div>
<div id="right"></div>
<div id="footer">
   <div class="button1">
           <input type="button" onclick="addArea();" value="发布" />
           <input type="button" onclick="cleanArea();" value="清除" />
           <input type="button" value="关闭" />
   </div>
</div>
</div>
 <script src="${ctx}/js/jquery.MaxInput.js" type="text/javascript"></script>
	<script type="text/javascript">
$(function() {
			$("#demo1").maxinput({
				position	: 'topleft',
				showtext 	: true,
				limit		: 140
			});
		});
function show(){
	$(".contentDisplay").toggle();
}
          function addContent(val){
            $("#addInfo").val($("#addInfo").val()+val);
}
             $("#span1>span[class!='backspace']").click(
          function(){
	            addContent($(this).text());
	}
   )
 $("#span2>span").click(
          function(){
	        addContent($(this).text());
	}
   
 )
 $("#select1>select").change(
          function(){
	      addContent($(this).val());
	} 
) 
  $("#province").change(
	      function(){
	    	  selectProvince();
	      }	  
  
  )
  $("#button23 input").click(
          function(){	
            addContent( $("#select2>select").val())
	}
   
 )
 $("#span1>span:last").click(
          function(){
		   var val=$("#addInfo").val();
		   $("#addInfo").val(val.substring(0,val.length-1));
	}
 )
  var lispan=0;
  $(".lispan").click(
          function(){   
		    lispan=$(this).attr("cid");
		    $("#addInfo").val($(this).attr("sid"));	
	} 
 )
  $(".lispan li").click(
          function(){   
        $(".lispan li[class*='lispan3']").removeClass("mouse");
        $(this).addClass("mouse");	  
	} 
 ) 

 function cleanArea(){
	  var val=$("#addInfo").val();
		$("#addInfo").val(val.substring(0,0));
  }
function addArea()
{
	var i=140;
	if($("#addInfo").val().length<i){
  $.post("${ctx}/pro/info!addInfo",{
	  city:$("#province").val(),
	  province:$("#city").val(),
	  infoType:$("#type1").val(),
	  info:$("#addInfo").val()
	  },function(response){
		  if(!response||!response.code)
		     {
		    	alert("no data"); return; 
		     }
	    	 if(response.code!=200)
	    	 {
	    	    alert(response.message); return ;
	    	 }
	  });
	}else{
		alert("输入框字数超过了");
	}
}
 function selectProvince()
	  {
	    $.post("${ctx}/pro/info!selectProvince",{name:$("#province").val()},function(response){
	    	 if(!response||!response.code)
		     {
		    	alert("no data"); return; 
		     }
	    	 if(response.code!=200)
	    	 {
	    	    alert(response.message); return ;
	    	 }
	    	    
	    		var result=response.data;
	    		
	    		$("#city").find("option").remove();
	    		
	    		for(var i=0;i<=result.length;i++){
	  
	    		 $("#city").append("<option>"+result[i].name+"</option>");
	    		}
	    });
	  }
function delInfo()
{
  $.post("${ctx}/pro/info!delInfo",{id:lispan},function(response){  
	  if(response.code==200)
 	 {
		  $("#history"+lispan).remove();
 	 }
  },'json');
}
</script>
</body>
</html>